<template>
  <div class="content">
    <div class="therapy-top">

    </div>
    <div class="therapy-main">
      <div v-for="(_case, index) in caseList" :key="index" class="therapy-box">
        <div v-on:click="toPatientImg(_case.id)" class="therapy-main-card">
          <el-card class="box-card">
            <div class="therapy-header">
              <p><b>方案 {{ index + 1 }}</b></p>
              <div class="therapy-header-similarity">
                相似度：<p class="therapy-header-similarity-value">{{ similarityList[index] }}</p>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="therapy-content">
              <p class="therapy-content-therapy">{{ _case.therapy }}</p>
              <p class="therapy-content-origin">—— 病历 {{_case.id}}</p>
            </div>
            <div class="therapy-footer">
              <p class="therapy-footer-time">{{ _case.time }}</p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'CaseTreatment',
  data () {
    return {
      similarityList: [],
      caseList: []
    }
  },
  mounted () {
    this.getTherapy()
  },
  methods: {
    getTherapy () {
      var _this = this
      this.$axios
        .get('/therapy', {
          params: {
            diseaseId: 3,
            caseId: 3
          }
        })
        .then(
          successResponse => {
            console.log(successResponse.data.data)
            _this.caseList = successResponse.data.data[0]
            _this.similarityList = successResponse.data.data[1]
          }
        )
        .catch(
          failResponse => {
            console.log(failResponse.msg)
          }
        )
    },
    toPatientImg (id) {
      Vue.prototype.GLOBAL.tgCaseId = id
      this.$router.push('/case/patientImg')
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 380px;
  min-height: 320px;
  position: relative;
}

.therapy-main {
  display: flex;
  flex-wrap: wrap;
}

.therapy-box {
  margin: 10px;
}

.therapy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.therapy-header-similarity {
  display: flex;
  justify-content: center;
  align-items: center;
}

.therapy-header-similarity-value {
  color: #42b983;
  font-weight: bold;
  font-size: 20px;
}

.therapy-content {
  position: relative;
  width: 100%;
}

.therapy-content-therapy {
  margin-bottom: 10px;
}

.therapy-content-origin {
  position: absolute;
  right: 10px;
  font-size: 14px;
  margin-bottom: 50px;
}

.therapy-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.therapy-footer-time {
  position: absolute;
  right: 30px;
  color: #999999;
  font-size: 12px;
}

.therapy-main-card {
  cursor: pointer;
}
</style>
